<template>
<div>
  <el-col :span="12" style="margin-bottom: 15px;margin-right: 10px" >
  <el-input placeholder="请输入用户名"  v-model="things.thing" clearable @clear="getTopicList"> <!-- 将value和query双向绑定 点击搜索就发送请求 请求相应的数据 放到userlist里 如果默认不搜索就是请求所有的数据 同时加上clearble属性 使得点击可以清除输入内容 于是触发clear事件 监听事件让下面显示所有数据 -->
    <el-button slot="append" icon="el-icon-search" @click="findTopicByInfo"></el-button>
  </el-input>
  </el-col>
  <el-col :span="3" >
    <el-button type="primary" @click="addDialogVisible = true">话题发布</el-button> <!-- 点击这个按钮 对话框显示出来 -->
  </el-col>
  <el-col :span="6">
    <div class="comment-header clearfix" style="margin-top: 15px">
      <el-radio v-model="radio" label="1" @change="getTopicList()">按热度排序</el-radio>
      <el-radio v-model="radio" label="2" @change="getTopicList()">按时间排序</el-radio>
    </div>
  </el-col>
  <!-- 话题列表区域 -->
  <el-table :data="topicList" border stripe fit> <!-- 跟menu一样 把要展示的数据存储到table自带的属性data里面 下面再用prop取对应的数据 和v-model双向绑定 -->
    <el-table-column type="index"  align="center" ></el-table-column> <!-- column索引列 只要加上type="index" -->
    <el-table-column label="图标" width="80px">
      <template slot-scope="scope"> <!-- 作用域插槽 新版是v-slot="scope" scope.row代表这一行的所有数据 这是从上面userlist里拿出来的 -->
        <el-avatar :size="50" :src="scope.row.topicIcon" class="headPortrait" @click="showTopicInfo(scope.row)"></el-avatar>
      </template>
    </el-table-column>
    <el-table-column label="话题"  align="center"  >
      <template slot-scope="scope"> <!-- 作用域插槽 新版是v-slot="scope" scope.row代表这一行的所有数据 这是从上面userlist里拿出来的 -->
        <span class="headPortrait"  @click="showTopicInfo(scope.row)">{{scope.row.topicName}}</span>
      </template>
    </el-table-column>
    <el-table-column label="描述" prop="topicDescr"  align="center" >
      <template slot-scope="scope"> <!-- 作用域插槽 新版是v-slot="scope" scope.row代表这一行的所有数据 这是从上面userlist里拿出来的 -->
        <span class="headPortrait"  @click="showTopicInfo(scope.row)">{{scope.row.topicDescr}}</span>
      </template>
    </el-table-column>
    <el-table-column label="帖子数量" prop="inviNum" width="70px"  align="center" ></el-table-column>
    <el-table-column label="创建时间" prop="createTime"  align="center" ></el-table-column>
    <el-table-column label="最新发帖" prop="updateTime"  align="center" ></el-table-column>

    <el-table-column label="操作" width="75px"  align="center" >
      <template slot-scope="scope"> <!-- 作用域插槽 -->
        <!-- 删除按钮 -->
        <el-tooltip effect="dark" content="删除帖子" placement="top" :enterable="false"> <!-- 鼠标放上去提示文字 enterable鼠标不可以进入到提示文字 即自动隐藏 -->
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteTopic(scope.row.topicId)"></el-button>
        </el-tooltip>
      </template>
    </el-table-column>

  </el-table>
  <!--   分页区域 -->
  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="topic.page" :page-sizes="[1, 2, 5, 10]" :page-size="topic.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> <!-- layout表示显示哪些东西 -->
  </el-pagination>
<!--  //话题添加页面内容-->
  <el-dialog title="话题发布" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed" :append-to-body="true">
    <!-- 内容主体区域 -->
    <el-form :model="topic"  ref="addFormRef" label-width="70px">
      <el-form-item label="话题名">
        <el-input v-model="topic.topicName" ></el-input>
      </el-form-item>
      <el-form-item label="话题描述">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="topic.topicDescr">
        </el-input>
      </el-form-item>
    </el-form>
    <!-- 底部区域 -->
    <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTopic">发 布</el-button>
      </span>
  </el-dialog>
  <!-- 查看帖子详情对话框 -->
  <el-dialog   :visible.sync="disabled" @close="handClose()"  width="800px" :append-to-body="true" :estroy-on-close="true">
    <div class="userInfoHeader">
      <el-avatar class="userIcon" :size="50" :src="topicInfo.topicIcon"></el-avatar>
      <div class="nickname_signature">
        <div class="userNickname"> #{{ topicInfo.topicName}}#</div>
        <div class="userSignature" style="margin-bottom: 10px">话题描述：{{ topicInfo.topicDescr }}</div>
        话题发帖数<i class="iconfont icon-tiezi"> {{topicInfo.inviNum}}</i>
      </div>
      <div class="time">
        <div class="createTime">话题创建时间：{{ topicInfo.createTime }}</div>
        <div class="updateTime">最近更新时间：{{ topicInfo.updateTime }}</div>
      </div>
    </div>
    <div class="userInfoMain">
      <el-tabs class="invitation" type="border-card">
        <el-tab-pane label="帖子">
          <div class="content" v-if="this.invitationListTopic.length>0">
            <div class="invitationContent" v-for="(item,index)  in invitationListTopic" v-bind:key="index">
              <div class="Col_left" @click="getInvitationInfoDetail(item.inviId)">
                <span class="threadlist_rep_num center_text" title="回复" >{{ item.commentNum }}</span>
              </div>
              <div class="Col_mid">
                <div class="Col_mid_top">
        <span class="Col_mid_top_title">

<!--          <span v-for="(item2,index)  in item.topics" v-bind:key="index">-->
          <!--            <span class="invitationTopic">#{{item2.topicName}}# </span>-->
          <!--          </span>-->
         <span class="inviTitle" @click="getInvitationInfoDetail(item.inviId)">
           {{item.inviTitle}}
         </span>
        </span>
                </div>
                <div class="Col_mid_under">
                  <div class="Col_mid_under_invitationContent" @click="getInvitationInfoDetail(item.inviId)">
                    {{item.inviContent}}
                  </div>
                  <!--        <div class="Col_mid_under_pic"></div>-->
                  <div class="Col_mid_under_mid">
                    <div class="Col_mid_under_right_zan">
                      <i class="iconfont icon-dianzan">  {{item.agreeNum}}</i><br/>
                      <i class="iconfont icon-liulan">  {{item.browseNum}}</i>
                    </div>
                  </div>
                  <div class="Col_mid_under_right">
                    <span class="Col_mid_under_right_time">{{item.createTime}}</span>
                  </div>
                </div>
              </div>
              <div class="Col_right">
                <el-tooltip effect="dark" class="deleteInvitation" content="删除帖子" placement="top" :enterable="false"> <!-- 鼠标放上去提示文字 enterable鼠标不可以进入到提示文字 即自动隐藏 -->
                  <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteInvi(item.inviId)"></el-button>
                </el-tooltip>
              </div>
            </div>
          </div>
          <div class="tipsNoInvitation" v-else>该话题暂无帖子讨论</div>
          <div class="page">
            <!--              <el-pagination-->
            <!--                @current-change="handleUserInvitationPageCurrentChange"-->
            <!--                :current-page="userInviPage.page"-->
            <!--                :page-size="5"-->
            <!--                layout="total, prev, pager, next"-->
            <!--                :total="userInvitationTotal">-->
            <!--              </el-pagination>-->
            <el-pagination
              @current-change="handleUserInvitationPageCurrentChange"
              :current-page.sync="things2.page"
              :page-size="4"
              layout="total, prev, pager, next"
              :total="invitationSize">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</div>
</template>

<script>
export default {
  data () {
    return {
      disabled: false,
      addDialogVisible: false,
      topicList: [],
      topic: {
        createTime: '',
        page: 1,
        pageSize: 10,
        sortOrder: '',
        topicDescr: '',
        topicIcon: '',
        topicId: -1,
        topicName: '',
        updateTime: '',
        version: -1
      },
      total: 0,
      things: {
        page: 1,
        pageSize: 5,
        sortOrder: '',
        thing: ''
      },
      // 异步搜索数据内容
      isshow: false,
      selectUsers: [],
      query: '',
      radio: '1',
      things2: {
        page: 1,
        pageSize: 4,
        sortOrder: 'topic_list',
        thing: '1'
      },
      invitationListTopic: [],
      invitationSize: 0,
      topicInfo: {
        createTime: '',
        page: 1,
        pageSize: 4,
        sortOrder: '',
        topicDescr: '',
        topicIcon: '',
        topicId: -1,
        topicName: '',
        updateTime: '',
        version: -1
      }
    }
  },
  methods: {
    async getTopicList () {
      // alert(this.topic.topicId)
      // this.topic.topicId = -1
      // this.topic.page = -1
      if (this.radio === '1') { this.topic.sortOrder = 'invi_Num' } else {
        this.topic.sortOrder = 'create_Time'
      }
      const { data: res } = await this.$http.post('topic/selectTopicByAccurate', this.topic)
      if (res.status !== 200) {
        return this.$message.error('获取话题列表失败！')
      }
      this.topicList = res.data.list
      this.total = res.data.total
    },
    // 用于改变面包屑导航栏
    changeBread () {
      document.getElementById('first').innerHTML = '话题管理'
      document.getElementById('second').innerHTML = '话题列表'
      document.getElementById('separate_1').innerHTML = '/'
      document.getElementById('separate_2').innerHTML = '/'
    },
    async deleteTopic (id) {
      const { data: res } = await this.$http.get(`topic/deleteTopic/${id}`)
      if (res.status !== 200) {
        return this.$message.error('删除失败！')
      }
      await this.getTopicList()
      return this.$message.success('删除成功！')
    },
    async findTopicByInfo () {
      if (this.things.thing === '') {
        await this.getTopicList()
      } else {
        this.things.page = this.topic.page
        this.things.pageSize = this.topic.pageSize
        const { data: res } = await this.$http.post('topic/selectTopicByVague', this.things)
        if (res.status !== 200) {
          return this.$message.error('查询失败！')
        }
        this.topicList = res.data.list
        this.total = res.data.total
      }
    },
    async addTopic () {
      const { data: res } = await this.$http.post('topic/insertTopic', this.topic)
      if (res.status === 200) {
        this.addDialogVisible = false
        // this.getTopicList(
        this.topic = {
          createTime: '',
          page: 1,
          pageSize: 10,
          sortOrder: '',
          topicDescr: '',
          topicIcon: '',
          topicId: -1,
          topicName: '',
          updateTime: '',
          version: -1
        }
        await this.getTopicList()
        return this.$message.success('发布成功！！')
      }
    },
    handleSizeChange (newSize) {
      this.topic.pageSize = newSize
      this.getTopicList()
    },
    // 监听 页码值 改变的事件 newPage为选择的页码值 选择了第几页就把这个页码作为参数传给数据请求中重新请求
    handleCurrentChange (newPage) {
      this.topic.page = newPage
      this.getTopicList()
    },
    addDialogClosed () {
      this.topic = {}
    },
    selectInput (event) {
      this.query = event.target.innerHTML
      this.isshow = false
    },
    async getTopicInvitation (topicId) {
      this.invitationList = []
      this.things2.thing = topicId
      // this.Invitation.pageSize = 4
      const { data: res } = await this.$http.post('topic/selectInviteByTopic', this.things2)
      this.invitationListTopic = res.data.list
      this.invitationSize = res.data.total
    },
    showTopicInfo (item) {
      this.topicInfo = item
      this.disabled = true
      this.getTopicInvitation(item.topicId)
    },
    handleUserInvitationPageCurrentChange (newPage) {
      this.things2.page = newPage
      this.getTopicInvitation2()
    },
    async getTopicInvitation2 (topicId) {
      // this.dataInvitation = []
      // alert(1)
      this.things2.thing = this.topicInfo.topicId
      // this.Invitation.pageSize = 4
      const { data: res } = await this.$http.post('topic/selectInviteByTopic', this.things2)
      console.log(res)
      this.invitationListTopic = res.data.list
      this.invitationSize = res.data.total
    },
    handClose () {
      this.disabled = false
    },
    async deleteInvi (id) {
      const { data: res } = await this.$http.get(`invitation/deleteInvite/${id}`)
      if (res.status !== 200) {
        return this.$message.error('删除失败！')
      }
      this.$message.success('删除成功！')
      this.getTopicInvitation2()
    },
    getInvitationInfoDetail (id) {
      this.$router.push({
        path: '/invitations/content/',
        component: 'invitationContent',
        query: {
          inviId: id
        }
      })
    }
  },
  mounted () {
    this.changeBread()
    this.getTopicList()
  }
}
</script>

<style scoped>
@import "../../assets/css/topicDialog.css";
</style>
